<template>
    <!-- 导航菜单 -->
    <el-scrollbar class="bg-[color:var(--menu-bg)]  dark:bg-[#121212] w-full ">
        <el-menu class="flex-col !border-r-0 dark:!bg-[#121212] " :background-color="bgColor" active-text-color="#fff"
            text-color="#ffffffb2" :mode="menuMode" :collapse-transition="false" :collapse="isCollapse"
            :default-active="activeMenu" :unique-opened="true" :router="true">
            <template v-for="item in menuList" :key="item.id">
                <el-sub-menu v-if="item.children && item.children.length > 0" :index="item.index">
                    <template #title>
                        <i>
                            <component :is="item.icon" theme="outline" size="16" class="pl-5 pr-3" />
                        </i>
                        <span>{{ item.label }}</span>
                    </template>
                    <template v-for="child in item.children" :key="child.id">
                        <el-sub-menu v-if="child.children && child.children.length > 0" :index="child.index">
                            <template #title>
                                <i>
                                    <component :is="child.icon" theme="outline" size="16" class="pl-5 pr-3" />
                                </i>
                                <span class="ml-3">{{ child.label }}</span>
                            </template>
                            <el-menu-item v-for="grandchild in child.children" :key="grandchild.id"
                                :index="grandchild.index">
                                <i>
                                    <component :is="grandchild.icon" theme="outline" size="16" class="pl-5 pr-3" />
                                </i>
                                <span>{{ grandchild.label }}</span>
                            </el-menu-item>
                        </el-sub-menu>
                        <el-menu-item v-else :index="child.index">
                            <i>
                                <component :is="child.icon" theme="outline" size="16" class="pl-5 pr-3" />
                            </i>
                            <span class="ml-3">{{ child.label }}</span>
                        </el-menu-item>
                    </template>
                </el-sub-menu>
                <el-menu-item v-else :index="item.index">
                    <i>
                        <component :is="item.icon" theme="outline" size="16" class="pl-5 pr-3" />
                    </i>
                    <span>{{ item.label }}</span>
                </el-menu-item>
            </template>
        </el-menu>
    </el-scrollbar>
</template>


<script setup lang="ts">
import { Home, Workbench, SettingOne } from '@icon-park/vue-next'
import { computed, onMounted, ref, watch } from 'vue';
import { useRoute } from 'vue-router'
import { settingMode } from '@/stores/setting'
import { mainMode } from '@/stores/main'

const settingsStore = settingMode()
const mainStore = mainMode()
const route = useRoute()
const menuMode = ref('vertical') // horizontal / inline
const isCollapse = computed(() => settingsStore.collapse)
const bgColor = computed(() => {
    const menuBg = getComputedStyle(document.documentElement).getPropertyValue('--menu-bg').trim()
    return settingsStore.themeStatus === 'light' ? menuBg : '#121212'
})
interface MenuItem {
    id: number;
    label: string;
    index: string;
    route?: string;
    icon?: Object;
    children?: MenuItem[]; // 添加可选的 children 属性
}
const menuList: MenuItem[] = [
    {
        id: 1,
        label: '首页',
        index: '/home', // 用于 el-menu-item 或 el-sub-menu 的 key / 路由标识
        route: '/home', // 可选，用于路由跳转
        icon: Home,
        children: [ // 子菜单
            {
                id: 11,
                label: '仪表盘',
                index: '/dashboard',
                route: '/dashboard',
            },
        ]
    },
    {
        id: 2,
        label: '工作台',
        index: '/workplace',
        route: '/workplace',
        icon: Workbench,
    },
    {
        id: 3,
        label: '设置中心',
        index: '/setting',
        route: '/setting',
        icon: SettingOne,
        children: [ // 子菜单
            {
                id: 31,
                label: '用户管理',
                index: '/user',
                route: '/user',
            },
        ]
    },


];
const emit = defineEmits(['route-change']) // 通知父组件路由变化
const activeMenu = computed(() => route.path)
// 监听路由变化
watch(
    () => route.path, // 监听路由路径变化
    (newPath) => {
        emit('route-change', newPath) // 触发事件，并传递新路径
    },
)
onMounted(() => {
    mainStore.setMenu(menuList)
})
</script>
<style scoped>
:deep(.el-menu-item.is-active) {
    background-color: #2d8cf0;
}

.el-menu--popup .el-menu-item.is-active {
    background-color: #2d8cf0 !important;
}

.el-menu-item:hover {
    color: #fff !important;
}

:deep(.el-sub-menu__title:hover) {
    color: #fff;
}

:deep(.el-menu-item *) {
    vertical-align: middle !important;
}

:deep(.el-sub-menu__title *) {
    vertical-align: middle !important;
}

/* :deep(.el-menu-item .el-menu-tooltip__trigger) {
    justify-content: center;
} */

:deep(.el-menu--collapse .el-menu-item .el-menu-tooltip__trigger) {
    justify-content: center;
}

:deep(.el-menu--collapse) {
    width: 100%;
}
</style>